<template>
	<view class="Row1 flex--row">
	  	<view class="welcome">
	  		<image src="@/static/location.svg" @click.stop="refreshLocation" role="button" aria-label="刷新定位" class="icon--middle"></image>
	  		<text> {{pointX}},{{pointY}}</text>
	  	</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				timer:null,
				waitSeconds:6, // 隔60s重新获取定位
				district:"定位中",
				pointX:0,
				pointY:0,
			}
		},

		methods:{
			startInterval(){
				this.timer = setInterval(() => {
					this.refreshLocation()
				},this.waitSeconds*1000)
			},
			refreshLocation(){
				const position = this.$store.getters.userPosition
				this.pointX = position.pointX
				this.pointY = position.pointY
				const address = this.$store.getters.userAddress
				if(address){
					this.district = address.district
					return
				}
				this.district = "定位失败"
			},
		},
		mounted(){
			this.refreshLocation()
			this.startInterval()
		},
		beforeUnmount(){
			clearInterval(this.timer)
		}
	}
</script>

<style lang="scss" scoped>
	.Row1{
		width:100%;
		justify-content: space-between;
		align-items: baseline;
		
		.welcome{
			image{
				width: 48px;
				height: 48px;
			}
			text{
				line-height: 48px;
				vertical-align: top;
				font-size: 24px;
				font-weight: 700;
				color: rgba(33, 37, 41, 1);
			}
		}
		.magic{
			width: 54px;
			height: 54px;
		}
	}
</style>